Manual review of "CyberSight Website.html" against WCAG 2.2 Level A and AA success criteria: computed contrast ratios, keyboard operation, semantics, target sizes, motion, and form behaviour. Issues found have been fixed in the live file; this report documents what was found and what changed.
| Criterion | Level | Finding | Status |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Bright navy accent text (#3A6296) on the dark ink background measured 2.5:1 (needs 4.5:1) — affected the hero kicker, "FORENSICS" in the nav wordmark, and the "CUSTODY INTACT" status. Replaced with a lighter accessible accent #87A9D2 (6.4:1); nav "FORENSICS" set to parchment per design review. | FIXED |
| 2.4.1 Bypass Blocks | A | No mechanism to skip the sticky navigation. Added a visible-on-focus "Skip to content" link as the first focusable element. | FIXED |
| 2.4.7 / 2.4.11 Focus Visible / Not Obscured | AA | Only browser-default focus rings were present; on the dark header they were hard to see. Added high-contrast :focus-visible outlines (3px) for links, buttons, accordions and social icons, in light- and dark-context colours. scroll-padding-top keeps focused targets clear of the sticky header. | FIXED |
| 1.1.1 Non-text Content | A | Brand mark images carried alt="CyberSight mark" adjacent to the visible wordmark text — screen readers announced the name twice. Marked decorative (alt=""). | FIXED |
| 4.1.2 Name, Role, Value | A | Social media links had no accessible name (a bare letter glyph and a title attribute, which is unreliable). Added aria-label to each. | FIXED |
| 4.1.3 Status Messages | AA | The form's "Request received" confirmation appeared visually but was not announced to assistive technology. Added role="status" and moved focus to it on submit. | FIXED |
| 3.3.2 Labels or Instructions | A | Required fields were not indicated. Added asterisks with an explanatory note ("Fields marked * are required"); native validation messages remain for errors. | FIXED |
| Pair (foreground / background) | Used for | Ratio | AA |
|---|---|---|---|
| Ink #1C2530 / Parchment #F8F7F4 | Body text | 14.5 : 1 | PASS |
| Muted #5C646F / Parchment #F8F7F4 | Secondary text | 5.5 : 1 | PASS |
| Muted #5C646F / White #FFFFFF | Card body text | 5.9 : 1 | PASS |
| On-dark muted #9AA4B1 / Ink #1C2530 | Dark-section secondary text | 6.1 : 1 | PASS |
| Accent-on-dark #87A9D2 / Ink #1C2530 | Kickers, statuses on dark | 6.4 : 1 | PASS |
| Parchment #F8F7F4 / Navy #23436C | Primary buttons | 9.4 : 1 | PASS |
| Navy #23436C / White #FFFFFF | SLA labels, kickers | 10.0 : 1 | PASS |
| Dark theme: #F8F7F4 / #141B24 | Body text (dark mode) | 15.5 : 1 | PASS |
| Dark theme: #9AA4B1 / #141B24 | Secondary text (dark mode) | 6.9 : 1 | PASS |
| Criterion | Level | Notes | Status |
|---|---|---|---|
| 1.3.1 Info & Relationships | A | Logical heading hierarchy (h1 → h2 → h3); header/nav/main/footer landmarks; labelled form fields (for/id); native details/summary accordions. | PASS |
| 2.1.1 Keyboard | A | All interactive elements are native links, buttons, selects and inputs — fully keyboard operable, no traps. | PASS |
| 2.3.3 Animation from Interactions | AAA* | Scroll reveals and smooth scrolling are both disabled under prefers-reduced-motion; reveal system is fail-safe (content never stays hidden). | PASS |
| 2.5.8 Target Size (Minimum) | AA | Buttons ≥ 36px; social icons 30px with spacing; nav links padded to ≥ 24px effective height; form controls ≥ 40px. | PASS |
| 1.4.4 / 1.4.10 Resize & Reflow | AA | Layout reflows to a single column at narrow widths with no horizontal scrolling; rem-free fixed metrics verified usable at 200% zoom. | PASS |
| 1.4.1 Use of Colour | A | Accents are always paired with text, weight or position cues; the featured tier also differs by button style and copy. | PASS |
| 3.1.1 Language of Page | A | lang="en" set; the new language picker updates document.lang on change. | PASS |
| 3.2.3 / 3.2.4 Consistency | AA | Single-page; navigation, CTAs and components are styled and ordered consistently. | PASS |
| 3.3.7 Redundant Entry | A | Single short form; no information requested twice. | PASS |
| Control | Provisions | Status |
|---|---|---|
| Search | role="search" landmark, labelled input, results announced via a visually-hidden role="status" region ("Jumped to…" / "No matches found"); respects reduced motion when scrolling. | PASS |
| Language picker | Native select with a visually-hidden label; choice persisted; updates page lang. Note: content is not yet translated — a Welsh (CY) content set is required for true 3.1.2 conformance once enabled. | ADVISORY |
| Dark/light switch | Real button with aria-pressed and a mode-aware label; 36px target; preference persisted; both themes meet AA contrast (table above). | PASS |
| Criterion | Status | What it takes |
|---|---|---|
| 1.4.6 Contrast (Enhanced) — 7:1 | DONE | Secondary text tokens upgraded: light-mode muted → #4A525D (7.4:1), dark-mode muted → #AEB7C2 (7.5:1). With the amber accent (7.2:1 on dark) and navy on light (9.4:1+), all text now meets or exceeds 7:1. |
| 2.5.5 Target Size (Enhanced) — 44px | DONE | Nav links padded to ≥44px effective height; social icons enlarged 30→44px; search, language and theme controls 44px; mobile menu and form controls already complied. |
| 2.4.9 Link Purpose (Link Only) | PARTIAL | Most links are self-describing. The three tier CTAs ("Report an incident" etc.) pass; generic social hrefs ("#") must point to real profiles before launch. |
| 2.4.10 Section Headings | MET | Every section is introduced by a numbered kicker + heading. |
| 2.4.12 Focus Not Obscured (Enhanced) | MET | scroll-padding-top keeps the full focused element clear of the sticky header. |
| 2.1.3 Keyboard (No Exception) | MET | All functionality is native-element based; no pointer-only interactions. |
| 2.2.3 No Timing / 2.3.2 Three Flashes | MET | No time limits, no flashing content. |
| 1.4.8 Visual Presentation | PARTIAL | Line length (≤80ch), line spacing (1.5+) and no justified text already comply. Full AAA also requires user-selectable fore/background colours — the dark/light switch covers part of this; a high-contrast option would complete it. |
| 1.4.9 Images of Text (No Exception) | MET | All site text is real text; the only images are the logo mark (logotype exemption). |
| 3.1.3–3.1.6 Reading: unusual words, abbreviations, level | CONTENT | Add a short glossary for forensic terms (chain of custody, hashed imaging, triage), expand abbreviations on first use (ICO, CREST, NCSC, SLA), and keep copy near plain-English guidance — an editorial task before launch. |
| 3.2.5 Change on Request | MET | No automatic context changes; theme/language only change on user action. |
| 3.3.5 Help / 3.3.6 Error Prevention (All) | DONE* | Context-sensitive hints added under Organisation, Work email and Phone fields (linked via aria-describedby). *A pre-submission review step should be added once a real backend exists. |
Summary: 10 of 12 applicable AAA criteria now met. Remaining two need: real social-profile and statutory-policy URLs (link purpose), and an editorial plain-English/glossary pass on copy.
Method: manual code review + computed luminance ratios (WCAG relative-luminance formula). This is an advisory audit, not formal certification — for procurement-grade conformance claims (e.g. a public-sector accessibility statement), commission an independent audit including assistive-technology testing (NVDA/JAWS/VoiceOver) with real users.
* 2.3.3 is Level AAA — exceeded target, included for completeness.